

<!-- 好友邀请 -->
<template>
	<view class="content">
		<!-- 居中logo -->
		<view class="flex-rwo-center"><image class="icon" src="/static/assets/login-logo.png"></image></view>
		<!-- 邀请提示框 -->
		<view class="block flex-rwo-around">
			<view class="block-1">
				<view class="user">好友{{ nick_name }}邀请您加入构购</view>
				<view class="tips">加入后您可以浏览</view>
				<view class="icons flex-rwo-around" style="margin-top: 40rpx;">
					<view class="icon-block flex-all-center">
						<image :src="icon.liulan" @click="share('0')"></image>
						<text>浏览海量商品</text>
					</view>
					<view class="icon-block flex-all-center">
						<image :src="icon.haiwai" @click="share('1')"></image>
						<text>购买溯源商品</text>
					</view>
					<view class="icon-block flex-all-center">
						<image :src="icon.fenxiang" @click="share('2')"></image>
						<text>分享赚取佣金</text>
					</view>
				</view>
				<view class="icons flex-rwo-around">
					<view class="icon-block flex-all-center">
						<image :src="icon.jifen" @click="share('3')"></image>
						<text>做任务赚贡献值</text>
					</view>
					<view class="icon-block flex-all-center">
						<image :src="icon.youhuiquan" @click="share('4')"></image>
						<text>专享优惠券</text>
					</view>
					<view class="icon-block flex-all-center">
						<image :src="icon.zhuanpan" @click="share('5')"></image>
						<text>幸运转盘抽奖</text>
					</view>
				</view>
				<!-- <image class="bg-logob" :src="icon.logo_b"></image> -->
			</view>
		</view>
		<!-- 输入框 -->
		<view class="inputBlock flex-all-center" style="margin-top: 34rpx;"><input placeholder="请输入手机号" v-model="phoneNumber" type="number" maxlength="11" /></view>
		<view class="inputBlock flex-all-center">
			<input placeholder="请输入验证码" style="width: 382rpx;border-right: 1rpx solid#eee;margin-right: 27rpx;" type="number" v-model="verifyCode" maxlength="6" />
			<verifyCode :phoneNumber="phoneNumber"></verifyCode>
		</view>

		<view class="saveBankCard-Container" @click="save">完成注册</view>


		<!-- 新用户登录 -->
		<!-- <view class="newUserLogin-Container">
			<view @click="gotoUserLoginPage()" class="loginContent">
				<view class="loginText">
					已有账号？立即登录
				</view>
				<image class="loginIcon" :src="icon.loginIcon" mode=""></image>
			</view>
		</view> -->

		<!-- 下载App -->
		<!-- #ifndef APP-PLUS -->
		<view @click="gotoDownloadApp()" class="limitAppBuy-Container">
			<image :src="icon.downBg" class="downBg" mode=""></image>

			<view class="down-content">
				<image :src="icon.download" class="buyIcon" mode=""></image>
				<view class="buyDesc">下载构购APP购买</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

import verifyCode from '@/components/verify-code/verify-code';
export default {
	components: {
		verifyCode
	},
	computed: {
		...mapState(['downUrl'])
	},
	data() {
		return {
			icon: {
				liulan: '/static/images/extension/liulan.png',
				haiwai: '/static/images/extension/haiwai.png',
				fenxiang: '/static/images/extension/fenxiang.png',
				jifen: '/static/images/extension/jifen.png',
				youhuiquan: '/static/images/extension/youhuiquan.png',
				zhuanpan: '/static/images/extension/zhuanpan.png',
				logo_b: '/static/assets/login-logo.png',

				loginIcon: '/static/images/extension/loginIcon.png',

				downBg: '/static/images/extension/downBg.png',
				download: '/static/images/extension/download.png'
			},
			phoneNumber: '',
			nick_name: '',
			id: '',
			sharedGoodsCd: "",
			verifyCode: ''
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.nick_name = options.nick_name;

		if(options.sharedGoodsCd) {
			this.sharedGoodsCd = options.sharedGoodsCd;
		}

		//清空缓存数据
		uni.removeStorageSync('addressData');
		uni.removeStorageSync('shopCartData');
		uni.removeStorageSync("orderStatus");
		uni.removeStorageSync('wxInfo');
		uni.removeStorageSync('tokenInfo');
	},
	methods: {
		
		...mapMutations(['login']),

		//注册
		save() {
			let that = this;
			that.$api.globalUtil.requestAjax({
				url: '/CustomerApi/register',
				method: 'POST',
				data: {
					telephone: that.phoneNumber,
					vcode: that.verifyCode,
					refereeId: that.id,
					sharedGoodsCd: that.sharedGoodsCd || ""
				},
				success: function(res) {
					if (res.data.success) {
						
						that.$api.msg('注册成功');
						uni.setStorageSync('tokenInfo', JSON.stringify(res.data.response));
						that.login();
						
						var pages = getCurrentPages(); // 获取页面栈
						if(pages.length > 1) {
							setTimeout(function() {
								uni.navigateBack({
								});
							}, 1500);
						}else {
							setTimeout(function() {
								uni.setStorageSync('tokenInfo', JSON.stringify(res.data.response));
								that.login();
								
								//跳转商品
								that.$api.globalUtil.getUserInfo(that, function(res) {
									if(res.data.response.sharedGoodsCd) {
										uni.navigateTo({
											url: '/pages/detail/detail?id='+res.data.response.sharedGoodsCd
										});
									}else {
										uni.switchTab({
											url: '/pages/index/index'
										});
									}
								});
							}, 1500);
						}
					} else {
						that.$api.msg(res.data.msg || '注册失败');
					}
				}
			});
		},

		//goto下载APP
		gotoDownloadApp() {
			let platform = '';
			let that = this;
			let url = that.downUrl;

			// window.location.href = 'fnwqsg://';
			setTimeout(function() {
				window.location.href = url;
			}, '2000');
		},


		//新用户登录
		gotoUserLoginPage() {
			
			var fromInvitation = -1;
			if(this.sharedGoodsCd) {
				fromInvitation = 1;
			}else {
				fromInvitation = 0;
			}
			uni.navigateTo({
				url: '/pagesUser/login/userLogin?fromInvitation='+fromInvitation
			});
		}
	}
};
</script>

<style lang="less">
page,
.content {
	background: #fff;
	height: 100%;
}
.icon {
	width: 100rpx;
	height: 100rpx;
	padding: 11rpx;
	border: 1rpx solid #FE5E49;
	border-radius: 50%;
	margin-top: 50rpx;
	background-color: #fff;
	z-index: 99;
	position: relative;
}
.block {
	width: 100%;
	height: 430rpx;
	top: -50rpx;
	position: relative;
	.block-1 {
		position: relative;
		z-index: 2;
		width: 690rpx;
		height: 430rpx;
		border-radius: 16rpx;
		box-shadow: 0px 0px 17rpx 1rpx rgba(178, 178, 178, 0.18);
		.user {
			margin-top: 66rpx;
			width: 100%;
			text-align: center;
			color: #333333;
			font-size: 26rpx;
		}
		.tips {
			margin-top: 6rpx;
			width: 100%;
			text-align: center;
			color: #999;
			font-size: 24rpx;
		}

		.icons {
			width: 690rpx;
			height: 90rpx;
			margin: 24rpx auto 0 auto;
			.icon-block {
				width: 120rpx;
				height: 90rpx;
				font-size: 22rpx;
				color: #333333;
				flex-wrap: wrap;
				white-space: nowrap;
				image {
					flex-shrink: 0;
					width: 60rpx;
					height: 60rpx;
				}
				text {
					// margin-top: 24rpx;
				}
			}
		}
	}
	.bg-logob {
		width: 338rpx;
		height: 306rpx;
		position: absolute;
		top: 51rpx;
		right: 49rpx;
		z-index: 1;
		opacity: 0.5;
	}
}
.inputBlock {
	width: 600rpx;
	height: 80rpx;
	border-radius: 10rpx;
	border: 1rpx solid #ffced2;
	margin: 26rpx auto;
	input {
		font-size: 26rpx;
		color: #333;
		width: 524rpx;
	}
}

// 注册信息用户
.saveBankCard-Container {
	margin: 0 auto;
	margin-top: 60rpx;
	width: 600rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: #FE5E49;
	border-radius: 45rpx;
	text-align: center;
	font-size: 34rpx;
	font-family: PingFang;
	// font-weight:500;
	color: rgba(255, 255, 255, 1);
}

// 下载APP
.limitAppBuy-Container {
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 110rpx;
	background: #FE5E49;

	.downBg {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.down-content {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		width: 100%;
		height: 100%;

		.buyIcon {
			width: 30rpx;
			height: 30rpx;
		}
		.logoApp {
			position: absolute;
			right: 80rpx;
			width: 127rpx;
			height: 110rpx;
		}
		.buyDesc {
			margin-left: 13rpx;
			height: 110rpx;
			line-height: 110rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #FE5E49;
		}
	}
}

// 新用户登录
.newUserLogin-Container {
	margin-top: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	.loginContent {
		display: flex;
		align-items: center;

		.loginText {
			font-size:26rpx;
			font-family:PingFang SC;
			// font-weight:500;
			color:#FE5E49;
		}

		.loginIcon {
			margin-left: 11rpx;
			width: 15rpx;
			height: 16rpx;
		}
	}
}
</style>
